<template>
  <div class="seek">
    <div class="search-header">
      <div class="search">
        <div class="iconsearch">
          <span class="iconfont icon-sousuo"></span>
        </div>
        <input type="text" class="input" placeholder="发现好游戏" />
      </div>
      <div class="avatar" @click="cancel">
        <div class="circle">取消</div>
      </div>
    </div>
    <div class="seeklist">
      <div class="listheader">热门搜索</div>
      <ul class="listitem">
        <li>奥奇传说</li>
        <li>星空之战</li>
        <li>水煮篮球</li>
        <li>原神</li>
        <li>此生无白</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "seek",
  methods: {
    cancel() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.seek {
  .seeklist {
    height: 88vh;
    background: white;
    padding-left: 4vw;
    padding-top: 12vh;
    .listheader {
      font-size: 0.4rem;
      font-weight: 700;
    }
    .listitem {
      li {
        margin-top: 0.32rem;
        font-size: 0.32rem;
      }
    }
  }
  .search-header {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    .left {
      margin-left: 0.2rem;
    }
    .search {
      margin-left: 4vw;
      flex: 4;
      padding: 4vw;
      box-sizing: border-box;
      border-radius: 1rem;
      border: 1px solid $themeColor;
      display: flex;
      height: 0.48rem;
      color: $themeColor;
      align-items: center;
      .iconsearch {
      }
      .input {
        margin-left: 2vh;
        border: none;
        background: none;
        font-size: 0.32rem;
        color: $themeColor;
      }
    }
    .avatar {
      margin-left: 0.2rem;
      flex: 1;
    }
  }
}
</style>